<html>
  <head>
    <script src="https://unpkg.com/artplayer/dist/artplayer.js"></script>
    <script src="https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"></script>
  </head>
  <body>
    <div id="mse" class="artplayer-app"></div>
  </body>
</html>

<script>
  function playM3u8(video, url, art) {
    if (Hls.isSupported()) {
      if (art.hls) art.hls.destroy();
      const hls = new Hls();
      hls.loadSource(url);
      hls.attachMedia(video);
      art.hls = hls;
      art.on('destroy', () => hls.destroy());
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = url;
    } else {
      art.notice.show = 'Unsupported playback format: m3u8';
    }
  }

  let playerConfig = {
    artplayer: {
      container: '#mse',
      url: '',
      type: '',
      autoplay: true,
      playbackRate: true,
      fullscreen: true,
      pip: true,
      setting: true,
      flip: true,
      hotkey: true,
      isLive: false,
      plugins: [
        artplayerPluginDanmuku({
          speed: 5,
          danmuku: [
            {
              text: '111', // 弹幕文本
              time: 1, // 发送时间，单位秒
              color: '#fff', // 弹幕局部颜色
              border: false, // 是否显示描边
              mode: 0, // 弹幕模式: 0表示滚动, 1静止
            },
            {
              text: '222',
              time: 2,
              color: 'red',
              border: true,
              mode: 0,
            },
            {
              text: '333',
              time: 3,
              color: 'green',
              border: false,
              mode: 1,
            },
          ],
        }),
      ],
      customType: {
        customHls: playM3u8,
      },
    },
  };
  var art = new Artplayer({
    container: '#mse',
    url: 'https://2wor1fvjsf.senhewenhua.com/1/W05la29tb2Uga2lzc2F0ZW5dW09vbXVyby1rZSAtIERlYXIgU2lzdGVyc11bTW92aWVdWzEwODBwXVtKUFNDXS5tcDQ=.mp4',
    autoplay: true,
    playbackRate: true,
    fullscreen: true,
    pip: true,
    setting: true,
    flip: true,
    hotkey: true,
    isLive: false,
    customType: {
      customHls: playM3u8,
    },
  });

  setTimeout(() => {
    console.log('timeout');
    art.switchUrl('https://2wor1fvjsf.senhewenhua.com/1/W05la29tb2Uga2lzc2F0ZW5dW09vbXVyby1rZSAtIERlYXIgU2lzdGVyc11bTW92aWVdWzEwODBwXVtKUFNDXS5tcDQ=.mp4?verify=1717229997-jPG4St88x87WlSAGaB3Wm8ys%2FoxVmL0jm2OPEUQfqaE%3D')
    // art.switch =
    //   'https://2wor1fvjsf.senhewenhua.com/1/W05la29tb2Uga2lzc2F0ZW5dW09vbXVyby1rZSAtIERlYXIgU2lzdGVyc11bTW92aWVdWzEwODBwXVtKUFNDXS5tcDQ=.mp4?verify=1717229997-jPG4St88x87WlSAGaB3Wm8ys%2FoxVmL0jm2OPEUQfqaE%3D';
    // playerMethod.artplayer.barrge(art, [
    //   {
    //     text: '111', // 弹幕文本
    //     time: 1, // 发送时间，单位秒
    //     color: '#fff', // 弹幕局部颜色
    //     border: false, // 是否显示描边
    //     mode: 0, // 弹幕模式: 0表示滚动, 1静止
    //   },
    //   {
    //     text: '222',
    //     time: 2,
    //     color: 'red',
    //     border: true,
    //     mode: 0,
    //   },
    //   {
    //     text: '333',
    //     time: 3,
    //     color: 'green',
    //     border: false,
    //     mode: 1,
    //   },
    // ]);
    // art.plugins.artplayerPluginDanmuku.config({
    //   danmuku: [
    //     {
    //       text: '111', // 弹幕文本
    //       time: 1, // 发送时间，单位秒
    //       color: '#fff', // 弹幕局部颜色
    //       border: false, // 是否显示描边
    //       mode: 0, // 弹幕模式: 0表示滚动, 1静止
    //     },
    //     {
    //       text: '222',
    //       time: 2,
    //       color: 'red',
    //       border: true,
    //       mode: 0,
    //     },
    //     {
    //       text: '333',
    //       time: 3,
    //       color: 'green',
    //       border: false,
    //       mode: 1,
    //     },
    //   ],
    // });
    // art.plugins.artplayerPluginDanmuku.load();
  }, 8000);
</script>
